<template>
  <div class="page-list-live">
    <PageList>
      <template #header>{{ title }}</template>
      <template #filter>
        <ListFilter :form="topFilter" :select-value="true" @changItemHandler="changHandler" @search="handleSearch" @reset="handleReset" />
      </template>
      <template #table>
        <div v-show="!IsOnline" class="alert-warp">
          <div class="alert-banner">当前客户端离线</div>
        </div>
        <ListTable ref="RefListTable" :loading="tableLoading" :table-data="tableData" :table-col="tableCol" @selectChange="handleSelectionChange">
          <template slot="col1" slot-scope="stData">
            <div class="demo-image__preview">
              <el-image
                :width="stData.row.width"
                style="width: 100px; height: 100px"
                :src="'data:image/jpg;base64,' + stData.row.file"
                :preview-src-list="['data:image/jpg;base64,' + stData.row.file]"
              />
            </div>
          </template>
        </ListTable>
      </template>
    </PageList>
  </div>
</template>

<script>
import listMixin from '@/mixins/list'
import ListFilter from '@/components/ListFilter'
import { mapGetters } from 'vuex'
import { formatHours, timeFormatter } from '@/utils'

import { safetyCatTracking, alertOverMan, GetOnlineStatus, alertOverTime, alertSensor, alertVideo, area } from '@/api/api'
export default {
  components: { ListFilter },
  mixins: [listMixin],
  data() {
    return {
      IsOnline: true,
      imgUrl: process.env.VUE_APP_BASE_API,
      stateValue: 1,
      title: '报警消息',
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      // 标记为已读
      markReadList: {
        id: ''
      },
      deleteList: {
        id: ''
      },
      topFilter: {
        deptName: {
          label: '报警类型选择',
          placeholder: '请选择报警类型',
          type: 'select',
          arr: [
            { label: '环境监测报警', value: 1 },
            { label: '超员报警', value: 2 },
            { label: '超时报警', value: 3 },
            // { label: '视频报警', value: 4 },
            { label: '安全帽报警', value: 5 }
          ]
        },
        createdTime: { label: '时间', type: 'date', arr: ['createdTime', 'createdTime'] }
      },
      tableData: [],
      tableCol: [
        // { type: 'selection' },
        { type: 'index', label: '序号', width: '60px' },
        {
          prop: 'createdTime',
          label: '报警时间',
          formatter: function (row, col, cell) {
            return timeFormatter(cell, true)
          },
          minWidth: '102px'
        },
        { prop: 'alertType', label: '报警类型' },
        { prop: 'alertValue', label: '报警值' },

        { prop: 'settingValue', label: '设置值' },
        // {
        //   prop: 'alertEndTime',
        //   label: '恢复时间',
        //   formatter: function (row, col, cell) {
        //     return timeFormatter(cell, true)
        //   },
        //   minWidth: '102px'
        // },
        {
          prop: 'Read',
          label: '状态',
          formatter: function (row, col, cell) {
            if (row.read === true) {
              return '已读'
            } else {
              return '未读'
            }
          },
          minWidth: '80px'
        }

        // { label: '操作', custom: 'col2' }
      ],
      areaData: [],
      dateChange: [],
      unreadSwaitch: false
    }
  },
  computed: {
    ...mapGetters(['serchObj'])
  },
  watch: {
    stateValue: function (newValue, oldValue) {
      const that = this
      switch (newValue) {
        case 1:
          that.tableCol = [
            // { type: 'selection' },
            { type: 'index', label: '序号', width: '60px' },
            {
              prop: 'createdTime',
              label: '报警时间',
              formatter: function (row, col, cell) {
                return timeFormatter(cell, true)
              },
              minWidth: '140px'
            },
            { prop: 'alertType', label: '报警类型' },
            { prop: 'alertValue', label: '报警值' },
            { prop: 'settingValue', label: '设置值' },

            {
              prop: 'Read',
              label: '状态',
              formatter: function (row, col, cell) {
                if (row.read === true) {
                  return '已读'
                } else {
                  return '未读'
                }
              },
              minWidth: '80px'
            }

            // { label: '操作', custom: 'col2' }
          ]
          break
        case 2:
          that.tableCol = [
            // { type: 'selection' },
            { type: 'index', label: '序号', width: '60px' },
            {
              prop: 'createdTime',
              label: '报警时间',
              formatter: function (row, col, cell) {
                return timeFormatter(cell, true)
              },
              minWidth: '140px'
            },
            { prop: 'alertType', label: '报警类型' },
            { prop: 'areaName', label: '区域' },
            { prop: 'limitationCount', label: '区域人数设定' },
            { prop: 'realCount', label: '报警人数' },
            { prop: 'overCount', label: '超出人数' },
            {
              prop: 'Read',
              label: '状态',
              formatter: function (row, col, cell) {
                if (row.read === true) {
                  return '已读'
                } else {
                  return '未读'
                }
              },
              minWidth: '80px'
            }
            // { label: '操作', custom: 'col2' }
          ]
          break
        case 3:
          that.tableCol = [
            // { type: 'selection' },
            { type: 'index', label: '序号', width: '60px' },
            {
              prop: 'createdTime',
              label: '报警时间',
              formatter: function (row, col, cell) {
                return timeFormatter(cell, true)
              },
              minWidth: '140px'
            },
            { prop: 'alertType', label: '报警类型' },
            { prop: 'areaName', label: '区域' },
            { prop: 'employee.name', label: '员工姓名' },
            { prop: 'employee.rfid', label: 'RFID' },
            { prop: 'employee.accessCardID', label: '门禁ID', minWidth: '104px' },
            {
              prop: 'enterTime',
              label: '进入隧道时间',
              formatter: function (row, col, cell) {
                return timeFormatter(cell, true)
              },
              minWidth: '140px'
            },
            {
              prop: 'duration',
              label: '本次进场时长',
              formatter: function (row, col, cell) {
                return formatHours(cell)
              },
              minWidth: '108px'
            },
            {
              prop: 'overTime',
              label: '超出时间',
              formatter: function (row, col, cell) {
                return formatHours(cell)
              },
              minWidth: '140px'
            },
            {
              prop: 'Read',
              label: '状态',
              formatter: function (row, col, cell) {
                if (row.read === true) {
                  return '已读'
                } else {
                  return '未读'
                }
              },
              minWidth: '80px'
            }
            // { label: '操作', custom: 'col2' }
          ]
          break
        case 4:
          that.tableCol = [
            // { type: 'selection' },
            { type: 'index', label: '序号', width: '60px' },
            {
              prop: 'createdTime',
              label: '报警时间',
              formatter: function (row, col, cell) {
                return this.$format(cell, true)
              }.bind(this),
              minWidth: '140px'
            },
            { prop: 'alertType', label: '报警类型' },
            { prop: 'areaName', label: '区域' },
            { prop: 'deviceName', label: '设备名称' },
            { prop: 'eventType', label: '事件类型' },
            { prop: 'content', label: '事件描述信息' },
            {
              prop: 'Read',
              label: '状态',
              formatter: function (row, col, cell) {
                if (row.read === true) {
                  return '已读'
                } else {
                  return '未读'
                }
              },
              minWidth: '80px'
            }
            // { label: '操作', custom: 'col2' }
          ]
          break
        case 5:
          that.tableCol = [
            // { type: 'selection' },
            { type: 'index', label: '序号', width: '60px' },
            {
              prop: 'datetime',
              label: '抓拍时间',
              formatter: function (row, col, cell) {
                return this.$format(cell, true, true)
              }.bind(this),
              minWidth: '140px'
            },
            { prop: 'option', label: '抓拍功能项' },
            { prop: 'department', label: '所在区域' },
            { prop: 'deviceId', label: '抓拍设备名称' },
            { prop: 'file', label: '抓拍头像缩略图', custom: 'col1' },
            {
              prop: 'Read',
              label: '状态',
              formatter: function (row, col, cell) {
                if (row.read === true) {
                  return '已读'
                } else {
                  return '未读'
                }
              },
              minWidth: '80px'
            }
            // { prop: 'code', label: '操作', custom: 'col2' }
          ]
          break

        default:
          break
      }

      const obj = this.serchObj
      if (!this.dateChange[0]) {
        delete obj.search
      }
      obj.pageIndex = 1
      this.getList(obj)
    }
  },
  mounted() {
    const routeId = this.$route.query.status

    if (routeId) {
      this.stateValue = Number(routeId)
    } else {
      this.stateValue = 1
    }
    this.$store.dispatch('user/setDefult', this.stateValue)
    this.CheckOnlinStatus()
  },
  beforeDestroy() {
    this.$store.dispatch('user/setDefult', 0)
  },
  methods: {
    async CheckOnlinStatus() {
      const res = await GetOnlineStatus()
      if (res.code === 200) {
        this.IsOnline = res.data
        console.info('  this.IsOnline', this.IsOnline)
      }
    },
    // 获取区域
    async getArea(query) {
      try {
        const obj = query || { pageIndex: 1, pageSize: 10 }
        const {
          data: { items: resData }
        } = await area('post', obj, false)
        this.areaData = resData.map((item) => {
          item.loadingEdit = false
          return item
        })
      } catch (err) {
        this.tableLoading = false
      }
    },
    // 下拉框改变
    changHandler(value, form) {
      console.log(value, form)
      if (value.key === 'deptName') {
        this.stateValue = value.val
        this.dateChange = form.createdTime.value
      }
    },
    // 批量删除
    batchDeletion() {
      if (!this.deleteList.id) {
        this.$message.warning('请选择要删除的数据！')
        return
      }
      this.$_delConfirm('所选数据', () => {
        this.delRowReq(this.deleteList)
      })
    },
    // 选中事件
    handleSelectionChange(event) {
      if (event.length > 0) {
        const ary = []
        event.forEach((item) => {
          ary.push(item.id)
        })
        if (ary.length > 1) {
          this.deleteList.id = ary.join(',')
        } else {
          this.deleteList.id = ary[0]
        }
      } else {
        this.deleteList.id = ''
      }
    },
    // 请求列表数据
    async getList(query) {
      if (query.search && query.search.length > 0) {
        const i = query.search.findIndex((item) => {
          return item.key === 'deptName'
        })
        if (i > -1) {
          query.search.splice(i, 1)
        }
      }

      this.areaData.length > 0 && (await this.getArea())
      this.tableLoading = true
      const that = this
      that.tableData = []
      console.log(12222)
      try {
        const obj = query || { pageIndex: 1, pageSize: 10 }
        obj.orderBy = 'createdTime'
        obj.orderByAscent = false
        switch (this.stateValue) {
          case 1:
            await alertSensor('post', obj, false).then((res) => {
              that.setList(res, that)
            })
            break
          case 2:
            await alertOverMan('post', obj, false).then((res) => {
              that.setList(res, that)
            })
            break
          case 3:
            await alertOverTime('post', obj, false).then((res) => {
              that.setList(res, that)
            })
            break
          case 4:
            await alertVideo('post', obj, false).then((res) => {
              that.setList(res, that)
            })
            break
          case 5:
            await safetyCatTracking('post', obj, false).then((res) => {
              that.setList(res, that)
            })
            break
        }
        this.tableLoading = false
      } catch (err) {
        this.tableLoading = false
      }
    },
    // 给列表赋值
    setList(resValue, that) {
      const {
        data: { items: resData, count, pageIndex }
      } = resValue
      this.tableData = resData.map((item) => {
        item.loadingEdit = false
        return item
      })
      this.tableData.forEach((item) => {
        var i = this.areaData.findIndex((val) => {
          return item.areaId === val.id
        })
        if (i > -1) {
          item.areaName = this.areaData[i].name
          item.limitation = this.areaData[i].limitation
        } else {
          item.areaName = item.area ? item.area.name : ''
        }
      })
      this.$nextTick(() => {
        that.$refs['RefListTable'].update({ page: pageIndex, count })
        that.tableLoading = false
      })
    },
    async delRowReq(row) {
      try {
        const obj = { id: row.id, value: null }
        switch (this.stateValue) {
          case 1:
            alertSensor('delete', obj, true)
            break
          case 2:
            alertOverMan('delete', obj, true)
            break
          case 3:
            alertOverTime('delete', obj, true)
            break
          case 4:
            alertVideo('delete', obj, true)
            break
          case 5:
            safetyCatTracking('delete', obj, true)
            break
        }
        await this.getList(this.serchObj)
        this.$message({
          type: 'success',
          message: '操作成功'
        })
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style lang='scss' scoped>
</style>
